<template>
  <div class="flex flex-wrap items-end gap-4">
    <BaseIconBox size="xs" shape="curved" class="bg-gray-200 text-gray-500 dark:bg-gray-800">
      <Icon name="ph:nut-duotone" class="h-3 w-3" />
    </BaseIconBox>

    <BaseIconBox size="sm" shape="curved" class="bg-gray-200 text-gray-500 dark:bg-gray-800">
      <Icon name="ph:nut-duotone" class="h-4 w-4" />
    </BaseIconBox>

    <BaseIconBox size="md" shape="curved" class="bg-gray-200 text-gray-500 dark:bg-gray-800">
      <Icon name="ph:nut-duotone" class="h-5 w-5" />
    </BaseIconBox>

    <BaseIconBox size="lg" shape="curved" class="bg-gray-200 text-gray-500 dark:bg-gray-800">
      <Icon name="ph:nut-duotone" class="h-6 w-6" />
    </BaseIconBox>

    <BaseIconBox size="xl" shape="curved" class="bg-gray-200 text-gray-500 dark:bg-gray-800">
      <Icon name="ph:nut-duotone" class="h-7 w-7" />
    </BaseIconBox>

    <BaseIconBox size="2xl" shape="curved" class="bg-gray-200 text-gray-500 dark:bg-gray-800">
      <Icon name="ph:nut-duotone" class="h-8 w-8" />
    </BaseIconBox>
  </div>
</template>
